<template>
  <div class="wrap">
    <p class="title">创建直播间</p>
    <div class="xxx">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="直播标题">
          <el-input v-model="form.name" :size="200"></el-input>
        </el-form-item>
        <el-form-item label="直播描述">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <!--       <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }" class="add">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete">
                <i class="el-icon-download"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload> -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" alt="" />
        </el-dialog>
        <p class="title"><b>直播模式:</b></p>
        <div class="ms">
          <p>
            <el-radio label="1">横屏模式</el-radio
            ><img src="http://localhost:8888/moshi1.png" alt="" />
          </p>
          <p>
            <el-radio label="2">竖屏模式</el-radio
            ><img src="http://localhost:8888/moshi2.png" alt="" />
          </p>
        </div>
        <div class="c">
          <p class="title"><b>直播间封面:</b></p>
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
        <el-form-item id="l">
          <!--   <el-button type="primary" @click="onSubmit">立即创建</el-button> -->
          <el-button type="text" @click="dialogVisible = true"
            >立即创建</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>

        <el-dialog
          title="选择"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
        >
          <div>
            <el-table :data="this.list" style="width: 100%">
              <el-table-column prop="name" label="选中" width="150">
                <input type="radio" />
              </el-table-column>
              <el-table-column prop="name" label="名称" width="150">
              </el-table-column>
              <el-table-column prop="title" label="描述" width="150">
              </el-table-column>
              <el-table-column prop="price" label="价钱" width="150">
              </el-table-column>
              <el-table-column label="商品图">
                <template slot-scope="scope">
                  <img :src="scope.row.image" alt="" style="height: 100px" />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    axios.get("/gethuo").then((res) => {
      this.list = res.data;
      console.log(this.list, "list");
    });
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 860px;
  background: #fff;
  /* background: red; */
  .title {
    font-size: 18px;
    font-weight: 800;
    padding: 20px;
  }
  .ms {
    width: 100%;
    height: 270px;

    margin-top: 20px;
    margin-left: 80px;
  }
}
.el-form {
  width: 40%;
}
/deep/ .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: 130px;
}
/deep/.el-upload--picture-card i {
  font-size: 10px;
}
#l {
  margin-top: 25px;
}
/deep/.el-dialog__body {
  height: 500px;
  overflow-y: scroll;
}
.el-button {
  background: #297fff;
  color: #fff;
  width: 100px;
}
</style>